<template>
	<vi-drawer ref="functionMenu" position="absolute" width="90%">
		<view class="vi_functionMenu vi_full">
			<view class="vi_functionMenu_toolbar">
				<vi-searchbar buttonStyle="active" :initSearch="false" :value="keyword" :text="textSetting" @search="onSearch"></vi-searchbar>
			</view>
			<view class="vi_functionMenu_body">
				<view class="vi_functionGroup">
					<scroll-view scroll-y class="vi_full" @touchmove.stop>
						<!-- 组 -->
						<view class="" v-for="(group, index) in showList" :key="index">
							<vi-collapse-base headHeight="2em" titleAlign="full" :opened="!!group.open">
								<view class="vi_bold" slot="title">{{group.name}}</view>
								<!-- 行 -->
								<view class="vi_functionRow" v-for="(item, idx) in group.list" :key="idx"
									:class="currItem&&currItem.value==item.value?'vi_functionMenu_active':''"
									@click="onSelect(item)">
									<view class="vi_textcut">{{item.name}}</view>
								</view>
							</vi-collapse-base>
						</view>
					</scroll-view>
				</view>
				<!-- 说明 -->
				<view class="vi_functionInfo" v-if="currItem">
					<view class="vi_functionAdd">
						<vi-button height="1.5em" width="100%" :type="type" :color="color" borderWidth="0" @click="onSubmit">
							<text class="iconfont icon-arr-up"></text>
						</vi-button>
					</view>
					<view class="vi_functionInfo_scroll">
						<scroll-view class="vi_full" scroll-y @touchmove.stop>
							<view class="vi_functionInfo_block" v-html="currItem.explain"></view>
							<view class="vi_functionInfo_block" v-html="textSetting.instruction+'：'+(currItem.instruction||'')"></view>
							<view class="vi_functionInfo_block" v-html="textSetting.example+'：'+(currItem.example||'')"></view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
	</vi-drawer>
</template>

<script>
	// 数据集：functionOptions。格式：
	// [
	// 	{
	// 		name:"组名",
	// 		list:[
	// 			{
	// 				name:"函数名",
	// 				value:"插入值",
	// 				point:插入后光标位移,
	// 				explain:`函数解释，带格式字符串`,
	// 				instruction:`函数用法，带格式字符串`,
	// 				example:`函数用法示例，带格式字符串`
	// 			},
	// 		]
	// 	}
	// ]
	export default {
		name:"viFormulaEditorFunctionMenu",
		options:{//样式穿透，微信须设置
			styleIsolation: "shared"
		},
		props: {
			//所有附件组件数据的集合
			dataSet:{},
			type:{
				type:[String,null],
				default:null
			},
			color:{
				type:[String,null],
				default:null
			},
			//文字自定义
			text:{
				type:[Object,null],
				default:()=>({})
			}
		},
		data(){
			return {
				dataList:null,
				showList:[],
				keyword:"",
				currItem:null,
				dicText:{
					instruction:"用法",
					example:"示例",
				}
			}
		},
		computed:{
			textSetting(){
				if(this.$api.isObject(this.text)){
					return Object.assign({},this.dicText,this.text)
				}
				return this.dicText
			}
		},
		methods:{
			open(){
				this.$refs.functionMenu.open()
			},
			close(){
				this.$refs.functionMenu.close()
			},
			//初始化数据
			initData(){
				//functionOptions为当前组件使用的数据集
				this.dataList = (this.dataSet && this.dataSet.functionOptions) ||[];
				this.showList = this.dataList;
			},
			//执行过滤
			onSearch(e){
				this.keyword = e;
				this.currItem = null;
				if(!this.$api.isValue(e)){
					this.showList = this.dataList;
					return
				}
				let res =[];
				for(let group of this.dataList){
					let tempList;
					let groupList =group.list;
					if(groupList && groupList.length){
						tempList = groupList.filter((item)=>{
							return item.name.includes(e) || item.explain.includes(e)
						});
						if(tempList.length){
							res.push(Object.assign({open:true},group,{list:tempList}))
						}
					}
				}
				this.showList = res;
			},
			//选中函数
			onSelect(item){
				this.currItem = item;
				// this.$forceUpdate();
			},
			//提交
			onSubmit(){
				let item = this.currItem;
				//提交
				this.$emit("event", "sysInsert", {
					mode: "text",
					value: item.value,
					color: item.color||"",
				}, item.point)
			}
		},
		watch:{
			//functionOptions为当前组件使用的数据集
			"dataSet.functionOptions":{
				immediate:true,
				handler(newVal){
					this.initData()
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.vi_functionMenu{
	padding: 0.25em 0.5em;
	box-sizing: border-box;
	.vi_functionMenu_toolbar{
		height: 2em;
		margin-bottom: 0.5em;
	}
	.vi_functionMenu_body{
		display: flex;
		align-items: stretch;
		height: calc(100% - 2.5em);
	}
	.vi_functionGroup{
		flex-shrink: 0;
		width: 50%;
		width: 10em;
		height: 100%;
		border-right: 1px solid #eee;
	}
	.vi_functionRow{
		padding: 0.5em 0;
		padding-left: 1.5em;
		font-size: 85%;
		&:nth-child(even){
			background-color: #f8f8f8;
		}
	}
	.vi_functionInfo{
		flex-grow: 1;
		padding-top: 0.25em;
		padding-left: 0.5em;
		font-size: 85%;
		line-height: 1.5;
		height: 100%;
		box-sizing: border-box;
	}
	.vi_functionAdd{
		width: 100%;
		max-width: 10em;
		height: 2em;
		margin: auto;
	}
	.vi_functionInfo_scroll{
		height: calc(100% - 2em);
		padding-top: 0.25em;
		box-sizing: border-box;
	}
	.vi_functionInfo_block{
		margin-bottom: 0.5em;
	}
	.vi_functionMenu_active{
		color: #c00;
		background-color: #fff5f5 !important;
	}
}
.vi_functionMenu /deep/ .vi_functionInfo_scroll .func{
	color: darkred;
	margin-right: 0.15em;
}
.vi_functionMenu /deep/ .vi_functionInfo_scroll .field{
	color: dodgerblue;
	margin-right: 0.15em;
}
.vi_full{
	width: 100%;
	height: 100%;
}
.vi_fbox{
	display: flex;
	justify-content: center;
	align-items: center;
}
.vi_bold{
	font-weight: bold;
}
.vi_textcut{
	overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
</style>